import {Button, Form, Row, Col, Radio, Popconfirm} from 'antd'
import React, {useEffect, useRef, useState} from 'react'
import {PlusOutlined} from '@ant-design/icons'
import 'moment/locale/zh-cn'
import {
	ActionType,
	EditableFormInstance,
	EditableProTable,
	ProColumns,
} from '@ant-design/pro-components'
import styles from './index.less'

type propsType = {
	type: string | undefined
	recommendData: any[]
	setRecommendData?: React.Dispatch<React.SetStateAction<any[]>>
	select: boolean // 是否选择供应商
	showName?: boolean // 是否选择供应商
	recommendStatus: number
	setRecommendStatus?: React.Dispatch<React.SetStateAction<number>>
	setSupplierValue?: React.Dispatch<React.SetStateAction<number | undefined>> // 取消选中的供应商
	processType?: boolean
}
type DataSourceType = {
	id: string
	key: string | number
	supplierName: string
	contactPerson: string
	contactNumber: string
	materialName: string
	unitName: string
	price: number
	includingTax: number
	taxRate: number
	reasons: string
}

const recommendList = (props: propsType) => {
	const {
		type,
		recommendData,
		setRecommendData,
		select,
		showName = true,
		recommendStatus,
		setRecommendStatus,
		setSupplierValue,
		processType = false,
	} = props
	const [form] = Form.useForm()
	const [forms] = Form.useForm()
	const actionRef = useRef<ActionType>()
	const editorFormRef = useRef<EditableFormInstance<DataSourceType>>()
	const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])

	const columns: ProColumns<DataSourceType>[] = [
		{
			title: '供应商名称',
			dataIndex: 'supplierName',
			width: 150,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
				],
			},
		},
		{
			title: '供应商联系人',
			dataIndex: 'contactPerson',
			width: 120,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
				],
			},
		},
		{
			title: '供应商联系方式',
			dataIndex: 'contactNumber',
			width: 120,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
				],
			},
		},
		{
			title: '物料名称',
			dataIndex: 'materialName',
			width: 120,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
				],
			},
		},
		{
			title: '单位',
			dataIndex: 'unitName',
			width: 100,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
				],
			},
		},
		{
			title: '单价',
			dataIndex: 'price',
			width: 100,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
					{
						message: '请输入正确的单价',
						pattern: /^([1-9]\d{0,8}|0)(\.\d{1,2})?$/,
					},
				],
			},
		},
		{
			title: '含税价',
			dataIndex: 'includingTax',
			width: 100,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
					{
						message: '请输入正确的含税价',
						pattern: /^([1-9]\d{0,8}|0)(\.\d{1,2})?$/,
					},
				],
			},
		},
		{
			title: '税率',
			dataIndex: 'taxRate',
			width: 100,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
					{
						message: '请输入正确的税率',
						pattern: /^([1-9]\d{0,2}|0)(\.\d{1,2})?$/,
					},
				],
			},
		},
		{
			title: '付款方式',
			dataIndex: 'payMethodname',
			width: 100,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
				],
			},
		},
		{
			title: '推荐原因',
			dataIndex: 'reasons',
			width: 200,
			align: 'center',
			formItemProps: {
				rules: [
					{
						required: true,
						message: '此项为必填项',
					},
				],
			},
		},

		{
			title: '操作',
			valueType: 'option',
			width: 100,
			align: 'center',
			fixed: 'right',
			hideInTable: type === 'view' || (type === 'process' && select),
			render: (text, record, _, action) => [
				<Button
					type="link"
					key="editable"
					size="small"
					onClick={() => {
						action?.startEditable?.(record.key)
					}}>
					编辑
				</Button>,
				<Popconfirm
					title="确定要删除吗？"
					onConfirm={() => {
						setRecommendData?.(
							recommendData.filter(
								(item: {key: string | number}) =>
									item.key !== record.key,
							),
						)
						setSupplierValue?.(undefined)
					}}
					okText="确定"
					cancelText="取消">
					<Button type="link" key="delete">
						删除
					</Button>
				</Popconfirm>,
			],
		},
	]
	useEffect(() => {
		if (type === 'edit') {
			if (recommendData?.length) {
				forms.setFieldsValue({recommend: 1})
				setRecommendStatus?.(1)
			} else {
				forms.setFieldsValue({recommend: 2})
				setRecommendStatus?.(2)
			}
		}
	}, [type, recommendData])

	return (
		<div className={styles.recommendList}>
			{select ? (
				<Form
					form={forms}
					layout="horizontal"
					labelCol={{flex: '120px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off">
					<Row gutter={12}>
						<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
							<Form.Item
								label="供应商推荐"
								name="recommend"
								hidden={type !== 'add' && type !== 'edit'}>
								<Radio.Group
									onChange={(e) => {
										if (e.target.value === 2) {
											setRecommendData?.([])
										}
										setRecommendStatus?.(e.target.value)
									}}>
									<Radio value={1}>是</Radio>
									<Radio value={2}>否</Radio>
								</Radio.Group>
							</Form.Item>
						</Col>
					</Row>
				</Form>
			) : (
				''
			)}
			{(type === 'view' || type === 'process') &&
			recommendData?.length === 0 &&
			processType === false ? (
				''
			) : (
				<>
					{recommendStatus === 1 ? (
						<div>
							{showName ? (
								<>
									{' '}
									{(type !== 'view' && !select) ||
									type === 'add' ||
									type === 'edit' ? (
										<>
											<Button
												icon={<PlusOutlined />}
												type="primary"
												ghost
												size="small"
												style={{marginBottom: '12px'}}
												onClick={() => {
													actionRef.current?.addEditRecord?.(
														{
															key: (
																Math.random() *
																1000000
															).toFixed(0),
														},
													)
												}}>
												新增
											</Button>
										</>
									) : (
										<p style={{marginLeft: '40px'}}>
											供应商推荐:
										</p>
									)}
								</>
							) : (
								''
							)}

							<EditableProTable<DataSourceType>
								scroll={{x: 1500}}
								className={styles.attachmentTable}
								bordered
								rowKey="key"
								actionRef={actionRef}
								editableFormRef={editorFormRef}
								recordCreatorProps={false}
								columns={columns}
								value={recommendData}
								editable={{
									form,
									editableKeys,
									onSave: async (
										rowKey,
										data: any,
										index: any,
									) => {
										const newData = [...recommendData]
										newData[index.index] = data
										setRecommendData?.(newData)
									},
									onChange: setEditableRowKeys,
									actionRender: (row, config, dom) => [
										dom.save,
										dom.cancel,
									],
								}}
							/>
						</div>
					) : (
						''
					)}
				</>
			)}
		</div>
	)
}

export default recommendList
